<template>
  <div class="head">
    <div class="head-title">
      <dv-decoration-5 style="width:100%;height:100%;position: absolute" />
      <div class="title-left">
        
      </div>
      <div class="title-middle">
        <div class="title">
          表面处理生产线可视化数字中心
        </div>
      </div>
      <div class="title-right">
        <div class="date">
          <div class="date-day">
            {{ time.year + '.' + time.month + '.' + time.day }}
          </div>
          <div class="date-time">{{ time.hour + ':' + time.minute }}</div>
        </div>
        <div class="weather">天气</div>
        <div class="temperature">温度</div>
        <div class="humidity">湿度</div>
      </div>
    </div>
    <!-- 导航区域 -->
    <div class="nav-container">
      <dv-border-box-13 style="width:100%;height:100%">
        <ul class="primary-nav">
          <!-- 八个一级菜单项 -->
          <li class="nav-item" v-for="(menu, id) of menuList" :key="id">
            <span>{{ menu.label }}</span>
            <Icon type="ios-arrow-forward" />
            <div class="popup">
              <ul class="secondary-nav" v-if="menu.menus.length > 0">
                <li class="secondary-item" v-for="(groupMenu, idx) of menu.menus" :key="idx">
                  <span class="secondary-title">{{ groupMenu.groupName }}</span>
                  <ul class="tertiary-nav" v-if="groupMenu.groupMembers.length > 0">
                    <li class="tertiary-item" v-for="(member, i) of groupMenu.groupMembers" :key="i" @click="menuItemClick">{{ member.title }}</li>
                  </ul>
                </li>
              </ul>
            </div>
          </li>
          <!-- <li class="nav-item">
            <span>产品中心</span>
            <Icon type="ios-arrow-forward" />
            <div class="popup">
              <ul class="secondary-nav">
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
              </ul>
            </div>
          </li>
          <li class="nav-item">
            <span>产品中心</span>
            <Icon type="ios-arrow-forward" />
            <div class="popup">
              <ul class="secondary-nav">
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
              </ul>
            </div>
          </li>
          <li class="nav-item">
            <span>产品中心</span>
            <Icon type="ios-arrow-forward" />
            <div class="popup">
              <ul class="secondary-nav">
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
              </ul>
            </div>
          </li>
          <li class="nav-item">
            <span>产品中心</span>
            <Icon type="ios-arrow-forward" />
            <div class="popup">
              <ul class="secondary-nav">
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
              </ul>
            </div>
          </li>
          <li class="nav-item">
            <span>产品中心</span>
            <Icon type="ios-arrow-forward" />
            <div class="popup">
              <ul class="secondary-nav">
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
              </ul>
            </div>
          </li>
          <li class="nav-item">
            <span>产品中心</span>
            <Icon type="ios-arrow-forward" />
            <div class="popup">
              <ul class="secondary-nav">
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
              </ul>
            </div>
          </li>
          <li class="nav-item">
            <span>产品中心</span>
            <Icon type="ios-arrow-forward" />
            <div class="popup">
              <ul class="secondary-nav">
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
                <li class="secondary-item">
                  <span class="secondary-title">电子产品</span>
                  <ul class="tertiary-nav">
                    <li class="tertiary-item" @click="menuItemClick">智能手机</li>
                    <li class="tertiary-item">笔记本电脑</li>
                    <li class="tertiary-item">平板电脑</li>
                    <li class="tertiary-item">智能手表</li>
                  </ul>
                </li>
              </ul>
            </div>
          </li> -->
        </ul>
      </dv-border-box-13>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Tcmd } from './command';
import { menuLimit } from './config';

@Component
export default class Head extends Vue {
  private timer: any = null;

  private time: any = {
    year: '',
    month: '',
    day: '',
    hour: '',
    minute: '',
    second: ''
  };

  private menuList: Array<any> = [];

  private formatTime(date: Date) {
    // const time = this.time
    // time.year = date.getFullYear();
    // time.month = date.getMonth() + 1;
    // time.day = date.getDate();
    // time.hour = date.getHours();
    // time.minute = date.getMinutes();
    // time.second = date.getSeconds();

    const time = this.time;
    time.year = date.getFullYear();
    const month = date.getMonth() + 1;
    if (month < 10) {
      time.month = `0${month}`;
    } else {
      time.month = month;
    }
    const day = date.getDate();
    if (day < 10) {
      time.day = `0${day}`;
    } else {
      time.day = day;
    }
    const hour = date.getHours();
    if (hour < 10) {
      time.hour = `0${hour}`;
    } else {
      time.hour = hour;
    }
    const minute = date.getDate();
    if (minute < 10) {
      time.minute = `0${minute}`;
    } else {
      time.minute = minute;
    }
    const second = date.getSeconds();
    if (second < 10) {
      time.second = `0${second}`;
    } else {
      time.second = second;
    }
  }

  created() {
    this.init();
  }

  mounted() {
    this.loadMenuList();
    document.querySelectorAll('.nav-item').forEach(item => {
      item.addEventListener('mouseenter', this.handleNavItemMouseenter);
    });
  }

  private handleNavItemMouseenter = (e: any)=> {
    const navContainer: HTMLElement = document.getElementsByClassName('nav-container')[0] as HTMLElement;
    // const primaryNav: HTMLElement = e.target.parentElement;
    const popup: HTMLElement = e.currentTarget.getElementsByClassName('popup')[0]
    const navContainerDOMRect: DOMRect = navContainer.getBoundingClientRect();
    const navItemDOMRect: DOMRect = e.target.getBoundingClientRect();
    const popupDOMRect: DOMRect = popup.getBoundingClientRect();

    const navItemLeftDisplayDistance = navItemDOMRect.right;
    const navItemRightDisplayDistance = navContainerDOMRect.width - navItemDOMRect.left;
    
    // popup的高度
    const popupMaxHeight = navItemDOMRect.top - 15;
    popup.style.maxHeight = popupMaxHeight + 'px';
    popup.style.maxWidth = (navContainerDOMRect.width - 30) + 'px';

    if (navItemLeftDisplayDistance > navItemRightDisplayDistance) {
      if (navItemLeftDisplayDistance > popupDOMRect.width) {
        popup.style.right = '0px';
      } else {
        popup.style.right = -(popupDOMRect.width - navItemLeftDisplayDistance - 100) + 'px';
      }
    } else {
      if (navItemRightDisplayDistance > popupDOMRect.width) {
        popup.style.left = '0px';
      } else {
        popup.style.left = -(popupDOMRect.width - navItemRightDisplayDistance + 5) + 'px';
      }
    }
  }

  private menuItemClick() {
    // 
  }

  private loadMenuList() {
    Tcmd.getNavData()
      .then(res => {
        const [b, resp, data, msg] = res;
        if (b) {
          this.menuList = [];
          const list = data['navs'];
          for (let i = 0; i < list.length; i++) {
            const el = list[i];
            if (menuLimit.has(el['title'])) {
              el['label'] = menuLimit.get(el['title']);
              this.menuList.push(list[i]);
            }
          }
          
        }
      })
      .catch(err => {
        this.$Message.error(err);
      });
  }

  private init() {
    this.timer = setInterval(() => {
      this.formatTime(new Date());
    }, 1000);
  }

  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>

<style lang="scss" scoped>
.head {
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  flex-direction: column;
  position: relative;

  .head-title {
    height: 70%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    // align-items: center;
    min-height: 100px;
    position: relative;

    .title-left {
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .title-middle {
      height: 65%;
      display: flex;
      justify-content: center;
      align-items: center;
      .title {
        font-family: Alibaba-PuHuiTi, sans-serif;
        font-size: 28px;
        font-weight: bold;
        color: #fff;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        background: linear-gradient(90deg, #ffffff 0%, #a8b0b8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding: 0 20px;
      }
    }

    .title-right {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;

      > div {
        flex: 1;
        height: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;

        &:not(:first-child) {
          border-left: 1px solid rgba(134, 142, 160, 0.5);
        }
      }

      .date {
        .date-day {
          font-size: 12px;
          margin-bottom: 4px;
        }

        .date-time {
          font-size: 18px;
          font-weight: bold;
          letter-spacing: 1px;
        }
      }

      .weather,
      .temperature,
      .humidity {
        font-size: 14px;
        opacity: 0.9;
      }
    }
  }

  /* 导航区域 */
  .nav-container {
    height: 30%; /* 占父div的40%空间 */
    width: 100%;
    // background: white;
    /* 一级菜单 */
    .primary-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      list-style: none;
      width: 100%;
      height: 100%;
      padding: 0 30px;

      .nav-item {
        flex: 1;
        text-align: center;
        position: relative;
        padding: 12px 0;
        cursor: pointer;
        transition: all 0.5s ease;
        font-weight: 600;
        color: #ccc;
        border-radius: 5px 5px 0 0;
        height: 90%;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
          // background-color: #f0f5ff;
          color: #1a73e8;
        }

        &:hover .ivu-icon {
          transform: rotate(-90deg);
        }

        /* 悬浮弹窗 */
        .popup {
          position: absolute;
          top: -10px; /* 调整到一级菜单上方 */
          // left: 0;
          transform: translateY(-100%);
          // background: white;
          background: rgb(250, 253, 244);
          border-radius: 8px;
          box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
          padding: 20px;
          z-index: 100;
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s ease;
          // width: 100%;
          max-height: 0;
          overflow: hidden;
          overflow-y: auto;
          overflow-x: auto;

          /* 二级菜单 */
          .secondary-nav {
            display: flex;
            justify-content: space-around;
            list-style: none;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
            margin-bottom: 15px;

            .secondary-item {
              padding: 8px 15px;
              font-weight: 600;
              color: #2c3e50;
              // cursor: pointer;
              transition: color 0.2s;
              white-space: nowrap;

              &:hover {
                color: #1a73e8;
              }

              .secondary-title {
                font-size: 1.1rem;
                font-weight: 700;
                color: #1a73e8;
                margin-bottom: 15px;
                padding-bottom: 8px;
                // border-bottom: 2px solid #1a73e8;

                &:hover {
                  cursor: text;
                  color: #1a73e8;
                }
              }

              /* 三级菜单 */
              .tertiary-nav {
                display: flex;
                flex-direction: column;
                list-style: none;

                .tertiary-item {
                  font-size: 12px;
                  padding: 8px 15px;
                  color: #555;
                  cursor: pointer;
                  transition: all 0.2s;
                  border-radius: 4px;

                  &:hover {
                    background-color: #f0f5ff;
                    color: #1a73e8;
                  }
                }
              }
            }
          }
        }

        &:hover .popup {
          opacity: 1;
          visibility: visible;
          max-height: 400px; /* 控制最大高度 */
        }
      }
    }
  }
}
</style>
